<template>
    <div class="shoppingCart-box"  ref="imgRef">
        <div class="one-box">
            <div>
                <span>购物车</span>
            </div>
        </div>
        <div class="two-box">
            <div style="margin-top:-80px;"></div>
            <div class="Goodsframe" v-for="item in myData.api">
                <div class="Goodsframe-box1">
                    <div>

                        <input type="checkbox" v-model="item.key"/>


                        <span>{{item.minc}}</span>
                    </div>
                </div>
                <div class="Goodsframe-box2">
                    <div>
                        <!-- <van-checkbox name="item.id" style="float: left;margin-top: 35px;"></van-checkbox> -->
                        <img style="float: left; width: 70%;" :src='item.img'/>
                    </div>
                    <div>
                        <h5>{{item.name}}</h5>
                        <van-cell @click="showPopup" style="height:50px; line-height:49px;">{{item.yc}} 【{{item.mini}}cm】<van-icon name="arrow-down" /></van-cell>
                        <van-popup
                        v-model:show="show"
                        round
                        position="bottom"
                        :style="{ height: '60%' }"
                        >
                        <div class="commodityparameters1">
                            <div>
                                <img src='https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E8%B4%AD%E7%89%A9%E8%BD%A6/imgs_u3051-0.svg'/>
                            </div>
                            <div>
                                <span style="color:red;">￥<span style="font-size:30px;">139.90</span></span>
                                <p style="color:gray;">库存171件</p>
                                <P style="color:black;">已选:"淡金色" "10cm"</P>
                            </div>
                        </div>
                        <div class="commodityparameters2" style="margin-top:30px; border-bottom: 1px solid gray; height: 90px;">
                            <h4>颜色分类</h4>
                            <div style="margin-top:10px;">
                                <div style="border:1px solid gray; width:70px; height: 40px; border-radius:10px 10px 10px 10px; line-height: 40px; text-align: center;">1</div>
                                <div style="border:1px solid gray; width:70px; height: 40px; border-radius:10px 10px 10px 10px; line-height: 40px; text-align: center;">2</div>
                                <div style="border:1px solid gray; width:70px; height: 40px; border-radius:10px 10px 10px 10px; line-height: 40px; text-align: center;">3</div>
                                <div style="border:1px solid gray; width:70px; height: 40px; border-radius:10px 10px 10px 10px; line-height: 40px; text-align: center;">4</div>
                            </div>
                        </div>
                        <div class="commodityparameters3" style="margin-top:30px; border-bottom: 1px solid gray; height: 90px;">
                            <h4>尺码</h4>
                            <div style="margin-top:10px;">
                                <div style="border:1px solid gray; width:70px; height: 40px; border-radius:10px 10px 10px 10px; line-height: 40px; text-align: center;">1</div>
                                <div style="border:1px solid gray; width:70px; height: 40px; border-radius:10px 10px 10px 10px; line-height: 40px; text-align: center;">2</div>
                                <div style="border:1px solid gray; width:70px; height: 40px; border-radius:10px 10px 10px 10px; line-height: 40px; text-align: center;">3</div>
                                <div style="border:1px solid gray; width:70px; height: 40px; border-radius:10px 10px 10px 10px; line-height: 40px; text-align: center;">4</div>
                            </div>
                        </div>
                        <van-button type="danger" round size="large" style="margin-top:70px;">确定</van-button>
                        </van-popup>
                        <p>
                            <span>￥{{item.age}}</span>
                            <button style="margin-left: 30px; width: 20px;" @click="jian">-</button>
                            <span>{{index}}</span>
                            <button style="width:20px;" @click="jia">+</button>
                        </p>
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomNav">
            <div class="three-box">
                <div class="sp1" style="float: left; margin-left: 40px;">
                     <input type="checkbox" @click="chang"/>全选
                </div>
                <div style="float: left; margin-left: 50px;">
                        <span>合计：<span style="color:red;">￥{{Total.toFixed(2)}}</span></span>
                <van-button class="sp2" type="warning" style="border-radius:10px 10px 10px 10px; height:35px; width: 60px; margin-left: 20px;" @click="dj">结算</van-button>
                </div>
            </div>
            <!-- <div>
                <router-link to="/home">首页</router-link>
                <router-link to="/productCate">分类</router-link>
                <router-link to="/messageList">消息</router-link>
                <router-link to="/shoppingCart">购物车</router-link>
                <router-link to="/mypage">我的</router-link>
            </div> -->
            <div>
            <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="search" to="/productCate">分类</van-tabbar-item>
            <van-tabbar-item icon="chat-o" to="/messageList">消息</van-tabbar-item>
            <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="/mypage">我的</van-tabbar-item>
            </van-tabbar>
            </div>
            </div>
    </div>
</template>
<script setup lang="ts">
    import { ref,onMounted,reactive, computed } from 'vue';
    import {shoppingCartapi} from '@/api/shoppingCartapi';
    import { useRouter } from "vue-router";
// import "amfe-flexible/index.js";
      //加载默认图片
      let active = ref(3)
      let myData = reactive({
        api:[]
    })
    onMounted(()=>{
        shoppingCartapi()
        .then(res=>{
            myData.api = res.data.data;
        })
    })
    //全选
    let pd=ref(true)
    let chang=()=>{
        myData.api.forEach(item=>{
            if(pd.value){
                item.key=true
            }else{
                item.key=false
            }
        })
        pd.value=!pd.value
    }

    //总价
    let Total=computed(()=>{
        let num=ref(0)
        myData.api.forEach(item=>{
            if(item.key==true){
                num.value+=Number(item.age)
            }
        })
        return num.value
    })

    //不知道
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    //加减
    let index=ref(1)
    let jian=()=>{
        if(index.value==0){
            index.value=0
        }else{
            index.value--
        }
    }
    let jia=()=>{
        index.value++
    }
    //监听效果
    let imgRef = ref(null);
    window.onscroll = ()=>{
        console.log("我执行了")
    }
    //结算
    let router=useRouter();
    let dj=()=>{
        router.push('/settleaccounts')
    }
</script>
<style scoped>
    *{margin: 0; padding: 0;}
    .bottomNav{
        position: fixed;
        width: 100%;
        height: 50px;
        bottom:0;
        background: #ffffff;
        border-top:3px solid #eae9e5;
        z-index: 999;
        left: 0;
        display: flex;
        justify-content: space-around;
        line-height: 50px;
    }
    .shoppingCart-box{
        width: 100%;
        height: 725px;
        border: 1px solid gray;
        overflow:auto;
    }
    .one-box{
        width: 100%;
        height: 145px;
        background-color: #c7aa95;
        border: 1px solid gray;
        z-index: 1;
        /* position: fixed; */
    }
    .one-box div{
        margin-top: 30px;
    }
    .one-box div span{
        color: white;
        font-size: 2px;
    }
    .two-box{
        border: 1px solid gray;
        background-color: white;
    }
    .Goodsframe{
        width: 80%;
        height: 190px;
        margin: 20px auto;
        background-color: white;
        border: 1px gray solid;
        border-radius: 20px 20px 20px 20px;
        z-index: 2;
    }
    .Goodsframe-box1{
        height: 40px;
        line-height: 40px;
    }
    .Goodsframe-box1 div{
        margin-left: 8px;
        margin-top: 10px;
        position: relative;
    }
    .Goodsframe-box1 span{
        position: absolute;
        left:40px;
        top:-10px
    }
    .Goodsframe-box2{
        width: 100%;
        height: 140px;
        display: flex;
    }
    .Goodsframe-box2 div{
        flex: 1;
    }
    .Goodsframe-box2 div:nth-child(1){
        margin-left: 7px;
    }
    .Goodsframe-box2 div:nth-child(1) img{
        margin-left: 10px;
    }
    .three-box{
        width: 100%;
        height: 40px;
        background-color: white;
        border: 1px solid gray;
        /* position: fixed; */
        bottom: 50px;
        line-height: 40px;
        position:absolute;
    }
    .sp1,.sp2{
        vertical-align: middle;
    }
    .commodityparameters1{
        display: flex;
        margin-top: 30px;
    }
    .commodityparameters2 div:nth-child(2) div{
        float: left;
        margin-left: 20px;
    }
    .commodityparameters3 div:nth-child(2) div{
        float: left;
        margin-left: 20px;
    }
</style>


